// import * as echarts from '../../components/ec-canvas/echarts';
// const http = require("../../api/index")


// Page({
//   onShareAppMessage: function (res) {
//     return {
//       title: 'ECharts 可以在微信小程序中使用啦！',
//       path: '/pages/index/index',
//       success: function () {},
//       fail: function () {}
//     }
//   },
//   data: {
//     ec: {
//       lazyLoad: true, //延迟加载
//     },
//     dataArr: [],
//     topList:[],
//     bottomList:[]
//   },
//   // 获取当前月的每一天日期
//   getEveryDay() {
//     let curDate = new Date();
//     let curMonth = curDate.getMonth();
//     curDate.setMonth(curMonth + 1);
//     curDate.setDate(0);
//     let day = curDate.getDate();
//     let d = new Date().getDate()
//     // 获取当前日期
//     let date = new Date();
//     // 获取当前月份
//     let nowMonth = date.getMonth() + 1;
//     // 对月份进行处理，1-9月在前面添加一个“0”
//     if (nowMonth >= 1 && nowMonth <= 9) {
//       nowMonth = "0" + nowMonth;
//     }
//     for (let k = 1; k <= d; k++) {
//       // 对日期进行处理，1-9号在前面添加一个“0”
//       if (k >= 0 && k <= 9) {
//         k = "0" + k;
//       }
//       this.data.dataArr.push(`${nowMonth}/${k}`);
//     }
//     this.setData({
//       dataArr:this.data.dataArr.reverse(),
//     })
//   },
//   getEveryInfo() {
//     http.getEveryInfo().then(res => {
//       if (res.code == 200){
//         this.setData({
//           dataArr:this.data.dataArr.reverse(),
//           topList:res.data.data[0],
//           bottomList:res.data.data[1]
//         })
//         console.log(res);
//         this.loadBar(this.data.dataArr.reverse(), res.data.data[0], res.data.data[1])
//       }
//     })
//   },
//   // echarts图
//   loadBar(date, salesR, stockroomR) {
//     let line = this.selectComponent('#mychart-dom-line')
//     line.init((canvas, width, height, dpr) => {
//       const lineChart = echarts.init(canvas, null, {
//         width: width,
//         height: height,
//         devicePixelRatio: dpr // new
//       })
//       var lineOperation = {
//         tooltip: {
//           trigger: 'axis',
//         },
//         grid: {
//           top: '8%',
//           left: '3%',
//           right: '4%',
//           bottom: '2%',
//           containLabel: true
//         },
//         xAxis: {
//           type: 'category',
//           boundaryGap: false,
//           data: date
//         },
//         yAxis: {
//           type: 'value'
//         },
//         series: [{
//             name: '预约数',
//             type: 'line',
//             stack: 'Total',
//             itemStyle: {
//               normal: {
//                 color: '#3097FE', //改变折线点的颜色
//                 lineStyle: {
//                   color: '#3097FE' //改变折线颜色
//                 }
//               }
//             },
//             data: salesR
//           },
//           {
//             name: '销售额',
//             type: 'line',
//             stack: 'Total',
//             itemStyle: {
//               normal: {
//                 color: '#4BB84B', //改变折线点的颜色
//                 lineStyle: {
//                   color: '#4BB84B' //改变折线颜色
//                 }
//               }
//             },
//             data: stockroomR
//           }
//         ],
//         dataZoom: [{
//             // 设置滚动条的隐藏与显示
//             show: true,
//             // 设置滚动条类型
//             type: "slider",
//             // 设置背景颜色
//             backgroundColor: "rgb(19, 63, 100)",
//             // 设置选中范围的填充颜色
//             fillerColor: "rgb(16, 171, 198)",
//             // 设置边框颜色
//             borderColor: "rgb(19, 63, 100)",
//             // 是否显示detail，即拖拽时候显示详细数值信息
//             showDetail: false,
//             // 数据窗口范围的起始数值
//             startValue: 0,
//             // 数据窗口范围的结束数值（一页显示多少条数据）
//             endValue: 5,
//             // empty：当前数据窗口外的数据，被设置为空。
//             // 即不会影响其他轴的数据范围
//             filterMode: "empty",
//             // 设置滚动条宽度，相对于盒子宽度
//             width: "80%",
//             // 设置滚动条高度
//             height: 5,
//             // 设置滚动条显示位置
//             left: "center",
//             // 是否锁定选择区域（或叫做数据窗口）的大小
//             zoomLoxk: true,
//             // 控制手柄的尺寸
//             handleSize: 0,
//             // dataZoom-slider组件离容器下侧的距离
//             bottom: 1,
//           },
//           {
//             // 没有下面这块的话，只能拖动滚动条，
//             // 鼠标滚轮在区域内不能控制外部滚动条
//             type: "inside",
//             // 滚轮是否触发缩放
//             zoomOnMouseWheel: false,
//             // 鼠标滚轮触发滚动
//             moveOnMouseMove: true,
//             moveOnMouseWheel: true,
//           },
//         ]
//       }
//       lineChart.setOption(lineOperation)
//       return lineChart
//     })
//   },
//   onLoad(options) {

//     this.getEveryDay()
//     this.getEveryInfo();
//   },
//   onReady() {}
// });

import * as echarts from '../../components/ec-canvas/echarts';
const http = require("../../api/index")

Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () {},
      fail: function () {}
    }
  },
  data: {
    ec: {
      lazyLoad: true, //延迟加载
    },
    dataArr: [],
    topList: [],
    bottomList: []
  },
  // 获取当前月的每一天日期
  getEveryDay() {
    let curDate = new Date();
    let curMonth = curDate.getMonth();
    curDate.setMonth(curMonth + 1);
    curDate.setDate(0);
    let day = curDate.getDate();
    let d = new Date().getDate()
    // 获取当前日期
    let date = new Date();
    // 获取当前月份
    let nowMonth = date.getMonth() + 1;
    // 对月份进行处理，1-9月在前面添加一个“0”
    if (nowMonth >= 1 && nowMonth <= 9) {
      nowMonth = "0" + nowMonth;
    }
    for (let k = 1; k <= d; k++) {
      // 对日期进行处理，1-9号在前面添加一个“0”
      if (k >= 0 && k <= 9) {
        k = "0" + k;
      }
      this.data.dataArr.push(`${nowMonth}/${k}`);
    }
    this.setData({
      dataArr: this.data.dataArr.reverse(),
    })
  },
  getEveryInfo() {
    // 模拟数据
    const mockData = {
      code: 200,
      data: {
        data: [
          [10, 20, 30, 40, 50, 60, 70], // 预约数
          [150, 180, 210, 240, 270, 300, 330] // 销售额
        ]
      }
    };

    if (mockData.code == 200) {
      this.setData({
        dataArr: this.data.dataArr.reverse(),
        topList: mockData.data.data[0],
        bottomList: mockData.data.data[1]
      });
      console.log(mockData);
      this.loadBar(this.data.dataArr.reverse(), mockData.data.data[0], mockData.data.data[1]);
    }
  },
  // echarts图
  loadBar(date, salesR, stockroomR) {
    let line = this.selectComponent('#mychart-dom-line');
    line.init((canvas, width, height, dpr) => {
      const lineChart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      var lineOperation = {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          top: '8%',
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value'
        },
        series: [{
            name: '预约数',
            type: 'line',
            stack: 'Total',
            itemStyle: {
              normal: {
                color: '#3097FE', //改变折线点的颜色
                lineStyle: {
                  color: '#3097FE' //改变折线颜色
                }
              }
            },
            data: salesR
          },
          {
            name: '销售额',
            type: 'line',
            stack: 'Total',
            itemStyle: {
              normal: {
                color: '#4BB84B', //改变折线点的颜色
                lineStyle: {
                  color: '#4BB84B' //改变折线颜色
                }
              }
            },
            data: stockroomR
          }
        ],
        dataZoom: [{
            // 设置滚动条的隐藏与显示
            show: true,
            // 设置滚动条类型
            type: "slider",
            // 设置背景颜色
            backgroundColor: "rgb(19, 63, 100)",
            // 设置选中范围的填充颜色
            fillerColor: "rgb(16, 171, 198)",
            // 设置边框颜色
            borderColor: "rgb(19, 63, 100)",
            // 是否显示detail，即拖拽时候显示详细数值信息
            showDetail: false,
            // 数据窗口范围的起始数值
            startValue: 0,
            // 数据窗口范围的结束数值（一页显示多少条数据）
            endValue: 5,
            // empty：当前数据窗口外的数据，被设置为空。
            // 即不会影响其他轴的数据范围
            filterMode: "empty",
            // 设置滚动条宽度，相对于盒子宽度
            width: "80%",
            // 设置滚动条高度
            height: 5,
            // 设置滚动条显示位置
            left: "center",
            // 是否锁定选择区域（或叫做数据窗口）的大小
            zoomLoxk: true,
            // 控制手柄的尺寸
            handleSize: 0,
            // dataZoom-slider组件离容器下侧的距离
            bottom: 1,
          },
          {
            // 没有下面这块的话，只能拖动滚动条，
            // 鼠标滚轮在区域内不能控制外部滚动条
            type: "inside",
            // 滚轮是否触发缩放
            zoomOnMouseWheel: false,
            // 鼠标滚轮触发滚动
            moveOnMouseMove: true,
            moveOnMouseWheel: true,
          },
        ]
      };
      lineChart.setOption(lineOperation);
      return lineChart;
    });
  },
  onLoad(options) {
    this.getEveryDay();
    this.getEveryInfo();
  },
  onReady() {}
});